<template>
  <div class="top_head item_center">
    <div class="box_size text_padding">
      <el-row gutter="20">
        <el-col :span="4" :xs="8" class="item_column_center">
          <el-text @click="goHome">欢迎来到轻松购!</el-text>
        </el-col>
        <el-col span="3" :xs="0">
          <el-text>关于我们</el-text>
        </el-col>
        <el-col :span="2" :xs="0">
          <el-text>商家入驻</el-text>
        </el-col>
        <el-col :span="10" :xs="0"></el-col>
        <el-col :span="3" :xs="8">
          <div v-if="!isLogin">
            <el-text @click="goToLogin">请登录</el-text>
            <el-divider direction="vertical"></el-divider>
            <el-text @click="goToLogin">免费注册</el-text>
          </div>
          <div v-else>
            <el-dropdown trigger="click">
              <div style="display: flex;padding-top: 5px">
                <el-avatar :size="20" :src="$img+userInfoData.avatar"/>
                &nbsp;
                <div>
                  <el-text> {{ userInfoData?.userNickname }}</el-text>
                </div>
                <el-icon><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="openLogout">
                    <el-text type="danger">退出登录</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item @click="toPerson">个人中心</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="2" :xs="0">
          <el-text @click="gotoCart">购物车</el-text>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {getMyInfoApi, logoutApi} from "@/api/user";
import {onMounted, ref} from "vue";
import {storeToRefs} from "pinia";
import {useCommonStore} from "@/store";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";

let store = useCommonStore()
let router = useRouter()
let userInfoData = ref({})
let {isLogin} = storeToRefs(store)

function goToLogin() {
  router.push('/login')
}
function gotoCart() {
  router.push('/person/person-cart')
}
function toPerson() {
  router.push('/person')
}

function goHome(){
  router.push("/")
}
function getUserInfo() {
  /*获取登录人信息*/
  getMyInfoApi().then(res => {
    userInfoData.value = res.data
  })
}
/**
 * 弹出警告框，退出登录
 */
function openLogout() {
  ElMessageBox.confirm(
      '你确定要退出登录吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        logoutApi()
        store.setLoginState(false)
        router.push('/home')
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功!',
        })
      })
}

onMounted(() => {
  if (isLogin.value) {
    getUserInfo()
  }
})

</script>

<style scoped>
.item_center {
  display: flex;
  justify-content: center;
}
.top_head {
  background-color: #d3dce6;
  padding: 1px;
}
.box_size {
  width: 1200px;
}
.text_padding{
  padding: 3px;
}
</style>
